<template>
  <div class="main">
    <div class="sidebar">
      <el-menu
        default-active="1-4-1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">核心</span>
          </template>
          <el-menu-item-group>
            <span slot="title">题目编辑</span>
            <el-menu-item index="1-1"
              ><router-link to="/management/editorCodeProblem">
                编程题编辑
              </router-link></el-menu-item
            >
            <el-menu-item index="1-2"
              ><router-link to="/management/editorChoiceProblem">
                选择题编辑
              </router-link></el-menu-item
            >
            <el-menu-item index="1-3"
              ><router-link to="/management/editorFillProblem">
                填空题编辑
              </router-link></el-menu-item
            >
          </el-menu-item-group>
          <el-menu-item-group title="小组信息">
            <el-menu-item index="1-3"
              ><router-link to="/management/editorCodeProblem">
                小组信息配置
              </router-link></el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="2">
          <i class="el-icon-s-data"></i>
          <span slot="title">统计信息</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-document"></i>
          <span slot="title">试卷信息</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-s-check"></i>
          <span slot="title">审批信息</span>
        </el-menu-item>
        <el-menu-item index="5">
          <i class="el-icon-setting"></i>
          <span slot="title">设置</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="code_problem_content">
      <div class="code_problem_content_show">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="题目名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="题目难度">
            <el-select v-model="form.region" placeholder="请选择题目难度">
              <el-option label="简单" value="shanghai"></el-option>
              <el-option label="中等" value="beijing"></el-option>
              <el-option label="困难" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题目标签">
            <el-checkbox-group v-model="form.type">
              <el-checkbox label="回溯" name="type"></el-checkbox>
              <el-checkbox label="动态规划" name="type"></el-checkbox>
              <el-checkbox label="字符串" name="type"></el-checkbox>
              <el-checkbox label="树" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="代码示例">
            <el-input type="textarea" v-model="form.code_desc"></el-input>
          </el-form-item>
          <el-form-item label="题目描述">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>
          <el-form-item label="主函数">
            <el-input type="textarea" v-model="form.main"></el-input>
          </el-form-item>

          <el-form-item label="时间限制">
            <el-input type="textarea" v-model="form.time_limit"></el-input>
          </el-form-item>
          <el-form-item label="内存限制">
            <el-input type="textarea" v-model="form.memory_limit"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: true,
      checkList: ["选中且禁用", "复选框 A"],
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        type: [],
        resource: "",
        desc: "",
        code_desc: "",
        main: "",
        time_limit: "",
        memory_limit: "",
      },
    };
  },
  methods: {
    onSubmit() {
      var that = this;
      this.$axios({
        method: "POST",
        url: "http://81.70.192.34:8088/problem/insertNewProblem",
        data: {
          "problemName": that.form.name,
          "problemDescribe": that.form.desc,
          "problemExample": that.form.code_desc,
          "problemUseCasesCode": that.form.main,
          "difficulty": that.form.region,
          "timeLimit": that.form.time_limit,
          "memoryLimit": that.form.memory_limit,
        }
      }).then(res => {
        console.log(res.data)
      }).catch((error) => {
        console.error(error);
      });
      console.log("submit!");

    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped>
.main {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
}
.sidebar {
  height: 100vh;
  width: 4vw;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100vh;
  min-height: 100vh;
}
.el-menu--collapse {
  height: 100vh;
}
.code_problem_content {
  height: 98vh;
  width: 92vw;
  margin-left: 1vw;
  margin-top: 2vh;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.code_problem_content_show {
  margin-top: 5vh;
  margin-left: 5vw;
  width: 80vw;
}
</style>